<template>
  <basic-container>
    <el-container>
      <el-aside width="300px">
        <el-divider content-position="center">组织架构</el-divider>
        <avue-tree :option="deptOption"
                   :data="deptData"
                   @node-click="deptClick"
                   @save="addDept"
                   @update="updateDept"
                   @del="deleteDept"
        ></avue-tree>
      </el-aside>
      <el-main>
        <el-divider content-position="left">部门负责人</el-divider>
        <div style="padding-left: 10px">
        <avue-crud v-bind="bindVal"
                   v-on="onEvent"
                   :page.sync="page"
                   v-model="startForm">
          <template v-for="(column,index) in columns" :slot="column.prop" slot-scope="{type,size,row}">
            <component :is="column.columnComponent" :row="row" :rowKey="column.prop" :column="column" :key="row.id+':'+index"></component>
          </template>
        </avue-crud>
        </div>
      </el-main>
    </el-container>
  </basic-container>
</template>

<script>

import startCrud from "@/mixins/start-crud.js"
import deptApi from "@/api/sys/deptApi.js"
import treeUtils from "@/utils/treeUtils";
import deptOption from "@/option/sys/deptOption";

export default startCrud({
  computed: {
    deptOption() {
      return {
        defaultExpandAll: true,
        formOption: deptOption(),
        props: {
          labelText: '机构名称',
          label: 'name',
          value: 'id',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      deptData: [],
    }
  },
  created() {
    this.loadDept();
  },
  methods: {
    loadDept() {
      deptApi.getAllDept().then(res => {
        this.deptData = treeUtils.listToTree(res.data.data);
      })
    },
    getListBefore() {
      if (!this.searchParams.deptId) {
        this.searchParams.deptId = -1;
      }
    },
    addDept(node, data, done, loading) {
      deptApi.add(data).then(res => {
        done();
        this.loadDept();
      })
    },
    updateDept(node, data, done, loading) {
      data.children=null;
      deptApi.updateById(null, data).then(res => {
        done();
      })
    },
    deleteDept(node, done) {
      deptApi.deleteById(node.id).then(res => {
        done()
      })
    },
    deptClick(data) {
      this.searchParams.deptId = data.id;
      this.getList();
    }
  }
}, {
  name: "sys/sysUserManageDept",
})
</script>

<style scoped>

</style>
